import React, {Component} from 'react';
import { StyleSheet, View } from 'react-native';
import { Message, Button } from 'iftide';
import { Message_Demo} from 'iftide';

export default class Basic extends Component{
    constructor(props) {
        super(props);
    }

    onClick1() {
        this.message1._show();
    }

    onClick2() {
        this.message2._show();
    }

    render() {
        return (
            <View style={styles.container}>
                <Button title={'OpenMessage-Top-5s'} onPress={() => this.onClick1()}/>
                <Message
                    ref={(obj) =>{this.message1 = obj}}
                    duration={5000}
                    text={'您有一条新短消息'}
                    position={'top'}
                    source={require('../image/ICON.png')}
                    onPress={() => console.log('1')}
                />
                <View style={styles.divider}/>
                <Button title={'OpenMessage-Bottom-3s'} onPress={() => this.onClick2()}/>
                <Message
                    ref={(obj) =>{this.message2 = obj}}
                    text={'您有一条新短消息，请注意查收'}
                    position={'bottom'}
                    source={require('../image/ICON.png')}
                    onPress={() => console.log('2')}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        height: '100%',
    },
    divider: {
        height: 20,
    }
});